<template>
  <div class="column-module">
    <div class="section-container">
      <div class="section-title">
        站点模板
      </div>
      <div class="section-description">
        <i class="iconfont">&#xe60e;</i>
        <p>头部模板：网站顶部导航区域，通常包含网站logo、主导航菜单、轮播图等重要元素。底部模板：网站底部区域，通常包含版权信息、友情链接、备案号等。
          <br />
          提示：本页面提供可视化拖拽设计功能，点击"修改"按钮即可进入可视化编辑界面。头部和底部模板为全局通用模板，修改将影响相关栏目展示效果，请谨慎操作！</p>
      </div>
      <div class="list-content">
        <el-tabs v-model="activeType" @tab-change="changeTab">
          <el-tab-pane v-for="(item, index) in typeList" :key="index" :label="item.label" :name="item.value"></el-tab-pane>
        </el-tabs>

        <RuifoxTable :loading="tableLoading" :default-index="false" :default-checkbox="false" v-model:tableData="tableData" v-model:fieldList="fieldList">
          <!-- 使用情况 -->
          <template #useCategoryName="{ element }">
            <span>{{ getUseText(element) }}</span>
          </template>
          <!-- 操作列 -->
          <template #options="{ element }">
            <div class="button-box">
              <el-button v-permission="['build:module:column:edit']" link type="primary" @click="handleEdit(element)">修改</el-button>
            </div>
          </template>
        </RuifoxTable>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { selectTemplateList } from '@/api/template'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

const router = useRouter()
const store = useStore()

// 定义表格列配置
const fieldList = ref([
  {
    title: '模板ID',
    name: 'id',
    width: 80
  },
  {
    title: '模板名称',
    name: 'name'
  },
  {
    title: '使用情况',
    name: 'useCategoryName'
  },
  {
    title: '模板路径',
    name: 'path'
  },
  {
    title: '操作',
    width: 120,
    fixed: 'right',
    name: 'options'
  }
])

const activeType = ref(5)
const typeList = reactive([
  { label: '头部模板', value: 5 },
  { label: '底部模板', value: 6 }
])

// 模板列表
const tableData = ref([])
const tableLoading = ref(false)
const getTemplateList = () => {
  tableLoading.value = true
  selectTemplateList({type: activeType.value, siteId: store.state.site.currentSite.id}).then(res => {
    tableData.value = res.data
    tableLoading.value = false
  })
}
getTemplateList()

const changeTab = () => {
  getTemplateList()
}

// 模板引用描述
const getUseText = (data) => {
  if (data.useCategoryName.length === 0) {
    return '未被栏目使用'
  }
  let columnName = data.useCategoryName.slice(0, 2).map(item => item.name).join('、')
  return `${columnName}等${data.useCategoryName.length}个栏目使用`
}

// 修改模板(取当前站点的任意catId)
const handleEdit = (data) => {
  const toUrl = router.resolve({
    path: '/station2/site/module/design',
    query: {
      id: data.id,
      catId: store.state.category.siteCategoryTree[0].id,
      templateType: data.type
    }
  })
  window.open(toUrl.href, "_blank")
}
</script>

<style scoped lang="scss">
.template-intro {
  margin-bottom: 16px;
  padding: 12px 16px;
  background-color: #f8f9fa;
  border-radius: 4px;
  
  .intro-content {
    color: #666;
    line-height: 1.5;
    
    p {
      margin-bottom: 6px;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
    
    .warning-text {
      color: #e6a23c;
      font-weight: 500;
      margin-top: 8px;
    }

    .tip-text {
      color: $mainColor;
      margin-top: 8px;
    }
  }
}

.button-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  i {
    margin-left: 10px;
    color: $mainColor;
    cursor: pointer;
  }
}
</style>
